<template>
  <main class="flex-1 max-w-7xl mx-auto w-full flex mt-4 px-4 gap-4">
    <aside class="w-64 bg-dark-lighter rounded p-4">
      <div class="flex items-center justify-between mb-4">
        <h3 class="font-semibold">历史记录</h3>
        <button class="text-gray-400 hover:text-primary">
          <i class="fas fa-trash"></i>
        </button>
      </div>
      <div class="space-y-2">
        <div v-for="(record, index) in historyRecords"
             :key="index"
             :class="['p-2 rounded cursor-pointer hover:bg-opacity-20 hover:bg-primary',
                       { 'bg-primary bg-opacity-10': index === 0 }]">
          <p class="text-sm text-gray-300 truncate">{{ record.question }}</p>
          <p class="text-xs text-gray-500">{{ record.time }}</p>
        </div>
      </div>
    </aside>

    <section class="flex-1 bg-dark-lighter rounded p-4 flex flex-col">
      <div class="flex-1 overflow-y-auto mb-4 space-y-4">
        <div v-for="(message, index) in chatMessages"
             :key="index"
             :class="['flex items-start', {'justify-end': message.isUser}]">
          <template v-if="!message.isUser">
            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
              <i class="fas fa-robot"></i>
            </div>
          </template>
          <div :class="['chat-message rounded-lg p-3',
                         message.isUser ? 'bg-primary bg-opacity-20' : 'bg-gray-800',
                         'group relative']">
            <div v-html="message.content"></div>
            <div v-if="!message.isUser"
                 class="absolute bottom-0 left-0 translate-y-full opacity-0 group-hover:opacity-100 flex space-x-2 mt-2 transition-opacity">
              <button v-for="action in messageActions"
                      :key="action.icon"
                      class="w-8 h-8 flex items-center justify-center rounded hover:bg-gray-700"
                      :title="action.title">
                <i :class="['fas', action.icon]"></i>
              </button>
            </div>
          </div>
          <template v-if="message.isUser">
            <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center ml-3">
              <i class="fas fa-user"></i>
            </div>
          </template>
        </div>
      </div>

      <div class="flex flex-col bg-gray-800 rounded-lg p-2">
        <div class="flex items-start space-x-2">
            <textarea
                v-model="userInput"
                placeholder="输入您的问题..."
                class="flex-1 bg-transparent border-none text-white px-3 py-2 resize-none min-h-[40px] max-h-[120px] overflow-y-auto"
                :style="{ height: textareaHeight + 'px' }"
                @input="adjustTextareaHeight"
                @keydown.enter.exact.prevent="sendMessage"
            ></textarea>
          <button class="bg-primary px-4 py-2 !rounded-button whitespace-nowrap" @click="sendMessage">
            <i class="fas fa-paper-plane mr-2"></i>发送
          </button>
        </div>
        <div class="flex items-center gap-2 mt-2 px-3">
          <div class="flex flex-wrap gap-2 items-center">
            <div v-for="command in commands"
                 :key="command.text"
                 class="group relative">
              <button class="text-gray-400 hover:text-primary border border-gray-600 px-2 py-1 rounded text-sm hover:border-primary whitespace-nowrap"
                      @click="addCommand(command)">
                {{ command.text }}
              </button>
              <div class="absolute bottom-full left-0 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs p-1 rounded whitespace-nowrap">
                {{ command.tooltip }}
              </div>
            </div>
          </div>
          <div class="flex-1 flex gap-2">
              <span v-for="(cmd, index) in activeCommands"
                    :key="index"
                    class="bg-gray-700 text-white px-2 py-1 rounded text-sm flex items-center gap-1">
                {{ cmd }}
                <button class="hover:text-red-500" @click="removeCommand(index)">×</button>
              </span>
          </div>
        </div>
      </div>
    </section>

    <aside class="w-64 bg-dark-lighter rounded p-4">
      <h3 class="font-semibold mb-4">快捷工具</h3>
      <div class="space-y-2">
        <button v-for="tool in quickTools"
                :key="tool.name"
                class="w-full text-left px-3 py-2 rounded hover:bg-primary hover:bg-opacity-10">
          <i :class="[tool.icon, 'mr-2']"></i>{{ tool.name }}
        </button>
      </div>
    </aside>
  </main>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const userInput = ref('');
const textareaHeight = ref(40);
const activeCommands = ref<string[]>([]);

const historyRecords = [

];

const chatMessages = [
  {
    isUser: false,
    content: '您好！这里是个人中心'
  }
];

const messageActions = [
  { icon: 'fa-sync-alt', title: '重新生成' },
  { icon: 'fa-copy', title: '复制全部' },
  { icon: 'fa-lightbulb', title: '复制思考' },
  { icon: 'fa-clipboard', title: '复制结果' },
  { icon: 'fa-trash', title: '删除' },
  { icon: 'fa-thumbs-up', title: '点赞' },
  { icon: 'fa-thumbs-down', title: '不喜欢' }
];

const commands = [
  { text: '/image', tooltip: '点击插入图片指令' },
  { text: '/history', tooltip: '查看历史记录' },
  { text: '#code', tooltip: '生成代码模式' },
  { text: '/help', tooltip: '查看帮助信息' },
  { text: '/clear', tooltip: '清空当前会话' }
];

const quickTools = [
  { name: '智能优化', icon: 'fas fa-wand-magic-sparkles' },
  { name: '翻译助手', icon: 'fas fa-language' },
  { name: '代码生成', icon: 'fas fa-code' },
  { name: '图片处理', icon: 'fas fa-image' }
];


const adjustTextareaHeight = (event: Event) => {
  const textarea = event.target as HTMLTextAreaElement;
  textarea.style.height = 'auto';
  textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
  textareaHeight.value = Math.min(textarea.scrollHeight, 120);
};

const addCommand = (command: { text: string }) => {
  if (!activeCommands.value.includes(command.text)) {
    activeCommands.value.push(command.text);
  }
};

const removeCommand = (index: number) => {
  activeCommands.value.splice(index, 1);
};

const sendMessage = () => {
  if (userInput.value.trim()) {
    chatMessages.push({
      isUser: true,
      content: userInput.value
    });
    userInput.value = '';
    textareaHeight.value = 40;
  }
};
</script>


<style scoped>

</style>
